<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico"/>
        <title>Schedule</title>
        <link href="resources/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="resources/css/general.css" rel="stylesheet"/>
        <link href="resources/css/schedule.css" rel="stylesheet"/>
        <link href="resources/datepicker/css/datepicker.css" rel="stylesheet"/>
        <script type="text/javascript" src="resources/js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="resources/js/transition.js"></script>
        <!--<script type="text/javascript" src="resources/js/shipmentDeclaration.js"></script>-->
    </head>

    <body>
        <jsp:include page="nav-bar.jsp" />
        <div class="container">

            <h2 class="form-signin-heading">Shipment Declaration</h2>
            <br />

            <h4>Please declare your shipment</h4>

            <table class="shipping-plan">
                <tr>
                    <td class="col-header">Ship ID:</td>
                    <td>${scheduleItem.ship.id}</td>
                </tr>
                <tr>
                    <td class="col-header">Ship Name</td>
                    <td>${scheduleItem.ship.name}</td>
                </tr>
                <tr>
                    <td class="col-header">Departure City</td> 
                    <td>${scheduleItem.departurePort}</td>
                </tr>
                <tr>
                    <td class="col-header">Departure Time</td> 
                    <td><fmt:formatDate pattern="dd MMM YYYY KK:mm z" value="${scheduleItem.departureDate}" /></td>
                </tr>
                <tr>
                    <td class="col-header">Arrival City</td>
                    <td>${scheduleItem.arrivalPort}</td>
                </tr>
                <tr>
                    <td class="col-header">Arrival Time</td>
                    <td><fmt:formatDate pattern="dd MMM YYYY KK:mm z" value="${scheduleItem.arrivalDate}" /></td>
                </tr>
            </table>

            <form id="declaration-form" role="form" action="declare" method="post">
                <div class="form-group ">
                    <label>Your Details (Mandatory)</label>
                    <input name="firstName" type="text" class="form-control" placeholder="First Name">
                    <input name="lastName" type="text" class="form-control" placeholder="Last Name">
                    <input name="phone" type="text" class="form-control" placeholder="Phone">
                    <input name="country" type="text" class="form-control" placeholder="Country">
                    <input name="address" type="text" class="form-control" placeholder="Address">
                    <input name="email" type="text" class="form-control" placeholder="Email">
                    <input name="taxnumber" type="text" class="form-control" placeholder="Tax Number">

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="emailNotification"> Receive Email Notification
                        </label>
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="smsNotification"> Receive SMS Notification
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>Recipient Details (Optional)</label>
                    <input name="recFirstName" type="text" class="form-control" placeholder="First Name">
                    <input name="recLastName" type="text" class="form-control" placeholder="Last Name">
                    <input name="recPhone" type="text" class="form-control" placeholder="Phone">
                    <input name="recEmail" type="text" class="form-control" placeholder="Email">
                </div>

                <div class="form-group">
                    <label>Shipment Details</label>
                    <input name="shipmentDetails" type="text" class="form-control" placeholder="Shipment Details">
                    <select name="category" class="form-control">
                        <option selected>Select the Category</option>
                        <option>Food & Beverages</option>
                        <option>Electronics</option>
                        <option>Electrical Items</option>
                        <option>Petroleum and other Oil</option>
                        <option>Plants and Flowers</option>
                        <option>Animals</option>
                        <option>Household and Furniture</option>
                        <option>Clothes and Accessories</option>
                        <option>Automobile</option>
                        <option>Weaponry</option>
                        <option>Other</option>
                    </select>
                    <label><input type="checkbox" name="inflammable" />&nbsp;&nbsp;Inflammable&nbsp;&nbsp;</label>
                    <label><input type="checkbox" name="perishable" />&nbsp;&nbsp;Perishable</label>

                    <select class="form-control" name="containerType">
                        <option selected>Select the Container Type</option>
                        <option>Shared</option>
                        <option>Dedicated</option>
                    </select>

                    <input name="weight" type="text" class="form-control" placeholder="Weight (Kilo Grams)">
                    <input name="width" type="text" class="form-control" placeholder="Width (Meters)">
                    <input name="height" type="text" class="form-control" placeholder="Height (Meters)">
                    <input name="length" type="text" class="form-control" placeholder="Length (Meters)">
                </div>
                <button type="submit" class="btn btn-default">Proceed</button>
            </form>

            <div id="schedule-items"></div>
        </div>
    </body>
</html>
